<template>
  <h3>我是父组件</h3>
  <button @click="open">父组件的按钮</button>
  <HeiMa ref="heimaRef" />
</template>

<script setup>
import HeiMa from './components/HeiMa.vue';
import { ref, onMounted } from 'vue';

const heimaRef = ref(null);

const open = () => {
  // 下面这行代码，就是父组件 通过ref 访问子组件的 方法，打开弹窗 --- 类似与之前的二次封装element的弹出框组件
  heimaRef.value.openDialog();
};

onMounted(() => {
  // 在vue3里面，通过ref访问子组件，默认什么数据也没有，需要子组件主动向外抛出一些内容
  console.log(heimaRef.value);
});
</script>
